今天是第 8 天，大家都知道跑迴圈的寫法，像是 for loop、forEach 等等，其中有兩個長得很像的 for..in 與 for...of，一開始很容易搞混，所以今天想跟大家分享這兩者的差別 ~~

先說總結

1. for...in 是 ES5 標準，for...of 是 ES6 標準
2. 兩者都是遍歷某些內容，不同的是它們遍歷的內容不一樣。
   • for...in 是遍歷物件所有可列舉的屬性 (key)，包括從原型鍊繼承到的屬性
   • for...of 是遍歷 iterable object 的值 (value)，並列出可迭代的值，iterable object 包括 Array、String、TypedArray、Map、Set、NodeList、arguments 等等
3. 對於物件來說：
   • for...in 遍歷的是 key
   • for...of 遍歷的是 value，不過直接使用 for...of 的話會報錯，需要搭配 Object.keys()
4. 對於 iterable object 來說：
   • for...in 遍歷的是 key，但是會把 iterable object 自定義的屬性或是從原型鍊繼承到的屬性也會列舉出來
   • for...of 遍歷的是 value
5. 想遍歷物件的 key 時，可以選擇 for...in
   想遍歷 iterable object 的 value 時，可以選擇 for...of

Example - array

假設今天有一陣列

let exArray = [1, 3, 5, 7]

// for...in 回傳 key
for (let i in exArray) {
  console.log(i) // "0", "1", "2", "3"  
}

// 也可以取 value
for (let i in exArray) {  
  console.log(exArray[i]) // 1, 3, 5, 7
}

// for...of 回傳 value
for (let i of exArray) {
  console.log(i)  // 1, 3, 5, 7  
}

BUT
如果我增加了屬性名稱的話

exArray.name = 'hi, exArray'

// for...in 會列出自定義屬性 name
for (let i in exArray) {
  console.log(i) // "0", "1", "2", "3", "name"  
}

for (let i in exArray) {  
  console.log(exArray[i]) // 1, 3, 5, 7, "hi, exArray"
}

// for...of 不會
for (let i of exArray) {
  console.log(i)  // 1, 3, 5, 7  
}

或是在原型鍊新增 function

// 在原型鍊新增 function
Object.prototype.objCustom = function () {}
Array.prototype.arrCustom = function () {}

let exArray2 = [2, 4, 6]

// for...in 會遍歷到從原型鍊繼承到的屬性
for (let i in exArray2) {
  console.log(i) // "0", "1", "2", "arrCustom", "objCustom"  
}

for (let i in exArray2) {
  console.log(exArray2[i]) // 2, 4, 6, function, function
}

// for...of 不會
for (let i of exArray2) {
  console.log(i) // 2, 4, 6
}

所以今天如果使用 iterable object 的話，選擇 for...of 會更適合

Example - object

假設有一物件

const fruit = {
  name: 'apple',
  price: 10,
  quantity: 200
}

// for...in 回傳 key
for (let key in fruit) {
  console.log(key)
}

// 也可以取 value
for (let key in fruit) {  
  console.log(fruit[key])
}

// for...of 取 value 需要搭配 Object.keys()
for (let key of Object.keys(fruit)) {
  console.log(key)
  console.log(fruit[key])
}

物件想取 key 的話，使用 for...in 會比 for...of 還簡潔喔！

Demo

參考資料：
只是個打字的 - JavaScript中for of和for in的差別
javascript總for of和for in的區別？
MDN for...in、for...of

文章同步更新於 medium